<template>
  <div class="Home">
    <div>基础案例</div>
    <!-- 从vuex中获取 -->
    <div>{{$store.state.num}}</div>
    <!-- 插值表达式简化 - 计算属性 - 计算属性不要使用箭头函数 -->
    <div>{{num}}</div>
    <div>
      <button @click='updateNum'>点击</button>
    </div>
    <div></div>
  </div>
</template>

<script>
// vuex专门引入一个函数简化状态
import { mapState } from 'vuex'
export default {
  data () {
    return {
      num1: 10
    }
  },
  computed: mapState({
    // 1. 基础写法 (state) 代表就是vuex申明的state(状态)
    // num (state) {
    //   return state.num
    // }
    //   // 2. 使用箭头函数(这里的this不用管 mapState内部处理了)
    // num: state => state.num
    //   // 3. vuex提供写法 (num是state中的字段名称)
    // num: 'num'
    //   // 4. 当你的计算属性 需要依赖vuex中的数据 同时  依赖组件中data的数据
    num (state) {
      return state.num + this.num1
    }
  }),

  // 计算属性的使用
  // computed: {
  //   // ES6中属性值是函数 - 可以这样写(缩写)
  //   num () {
  //     return this.$store.state.num
  //   }
  // },

  methods: {
    updateNum () {
      // this.num = this.num + 1
      this.$store.commit('updateNum', 1)
    }
  },
  name: 'Home'
}
</script>
